<template>
	<el-table :data="tasks" style="width: 70%">
	    <el-table-column prop="taskName" label="任务名称" width="180" />
	    <el-table-column prop="taskPriority" label="任务优先级" width="120" />
		<el-table-column prop="taskState" label="任务状态" width="120"/>
	    <el-table-column prop="taskDate" label="任务结束日期" width="180"/>
		<el-table-column fixed="right" label="操作" width="120">
		    <template #default="scope">
		        <el-button link type="primary" size="small" @click.prevent="showTask(scope.$index)" ><!-- deleteRow(scope.$index) -->
					查看
		        </el-button>
				<el-button link type="primary" size="small" @click.prevent="updateTask(scope.$index)" ><!-- deleteRow(scope.$index) -->
					修改
				</el-button>
		    </template> 
		</el-table-column>
	</el-table>
	
	<!-- 任务查看提示框 -->
	<el-dialog v-model="taskDialogVisible" title="任务信息">
		任务名称：{{tasks[num].taskName}}<br>
		任务内容：{{tasks[num].taskContent}}<br />
		任务状态：{{tasks[num].taskState}} | 任务优先级：{{tasks[num].taskPriority}}<br />
		任务反馈信息：{{tasks[num].taskFeedback}}<br/>
		任务分配人员：
		<el-table :data="tasks[num].users" style="width: 100%" max-height="250">
			<el-table-column prop="userId" label="工号" width="60" />
			<el-table-column prop="userName" label="姓名" width="60" />
			<el-table-column prop="userDepart" label="部门" width="60" />
		</el-table>
		<br/>
		任务结束日期：{{tasks[num].taskDate}}<br>
		<el-button type="primary" @click="taskDialogVisible=false">确认</el-button>
	</el-dialog>
	
	<!-- 任务修改提示框 -->
	<el-dialog v-model="taskUpdateDialog" title="修改任务">
		<el-form label-width="120px">
			<el-form-item label="任务名称">
			      <el-input placeholder="请输入任务名称" v-model="tasks[num].taskName" />  
			</el-form-item>
			<el-form-item label="任务内容">
				<el-input
				    v-model="tasks[num].taskContent"
				    :autosize="{ minRows: 3, maxRows: 8 }"
				    type="textarea"
				    placeholder="请输入任务内容"
				  />
			</el-form-item>
			<el-form-item label="任务完成日期">
				<el-date-picker
				v-model="tasks[num].taskDate"
				type="date"
				placeholder="请选择日期"
				:disabled-date="disabledDate"
				/>
			</el-form-item>
			
			<el-form-item label="任务优先级">
				<el-radio-group v-model="tasks[num].taskPriority">  
				      <el-radio label="低" size="large" border>低</el-radio>
				      <el-radio label="中" size="large" border>中</el-radio>
					  <el-radio label="高" size="large" border>高</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="updateTaskSubmit">确认</el-button>
				<el-button type="primary" @click="taskUpdateDialog=false" plain>取消</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
	
</template>

<script>
	import qs from 'qs'
	export default {
			data() {
				return {
					tasks:[],
					task:{},
					taskDialogVisible:false,
					taskUpdateDialog:false,
					num:0,
					taskuser:{}
				}
			},
			methods: {
				showTask(index) {
					this.num=index
					this.taskuser.taskId=this.tasks[index].taskId
					let that=this
					let s=qs.stringify(that.taskuser)
					this.$axios.get("http://localhost:8080/taskuser/show?"+s).then(function(res){
						that.tasks[index].users=res.data
						that.taskDialogVisible=true
					})
				},
				updateTask(index){
					this.num=index
					this.taskUpdateDialog=true
				},
				updateTaskSubmit(){
					let that=this
					let s=qs.stringify(that.tasks[that.num])
					this.$axios.get("http://localhost:8080/task/taskupdate?"+s).then(function(res){
						that.taskUpdateDialog=false
					})
					
				}
	
			},
			created() {
				let u=JSON.parse(sessionStorage.getItem("user"))
				let that=this
				that.task.userId=u.userId
				let str=qs.stringify(that.task)
				this.$axios.get("http://localhost:8080/task/taskshow?"+str).then(function(res){
					that.tasks=res.data
				})
			}
	} 
</script>

<style>
</style>
